<template>
	<view class="trends">
		<view class="list" v-if="item">
			<view class="item">
				<view class="item_hd wap" @click="nav_to(`/pages/user/user_visitor?id=${item.UserID}`)">
					<view class="left">
						<view class="cover">
							<image :src="item.HeadImgUrl" mode="" />
						</view>

						<view class="item_name">{{item.Name}}
							<view class="f3 c3">{{ getYearStr(item.Birthday) }}后 {{item.City?item.City:''}}</view>
						</view>

					</view>

					<view class="f3 c3">{{getTime(item.CreateTime)}}</view>
				</view>
				<view class="item_bd wap">

					<view class="f2 c2" v-if="item.PagePath!=''" @click="nav_to(`${item.PagePath}`)">
						<view class="">
							{{item.Content}}
						</view>
					</view>
					<view class="f2 c2" v-else>
						{{item.Content}}
					</view>

					<view class="mt20" @click.stop="''" v-if="item.IsVideo === 0 ">
						<view class="one" @click.stop="lookimg(item.Images)" v-if="JSON.parse(item.Images).length == 1">
							<image class="simg" :src="JSON.parse(item.Images)[0]+'?x-oss-process=image/resize,m_fill,w_1500'" mode="widthFix"
								@click.stop="lookimg(item.Images,0)" />
						</view>
						<view class="two" @click.stop="lookimg(item.Images)" v-else-if="JSON.parse(item.Images).length == 2">
							<view class="two-one" @click.stop="lookimg(item.Images,0)">
								<image class="simg" :src="JSON.parse(item.Images)[0]+'?x-oss-process=image/resize,m_fill,w_1500'" mode="aspectFill" />
							</view>
							<view class="two-two">
								<image class="simg" :src="JSON.parse(item.Images)[1]+'?x-oss-process=image/resize,m_fill,w_1500'" mode="aspectFill"
									@click.stop="lookimg(item.Images,1)" />
							</view>
						</view>
						<view class="three" @click.stop="lookimg(item.Images)" v-else-if="JSON.parse(item.Images).length == 3">
							<view class="three-one" @click.stop="lookimg(item.Images,0)">
								<image class="simg" :src="JSON.parse(item.Images)[0]+'?x-oss-process=image/resize,m_fill,w_1500'" mode="aspectFill" />
							</view>
							<view class="three-two">
								<image class="simg" :src="JSON.parse(item.Images)[1]+'?x-oss-process=image/resize,m_fill,w_1500'" mode="aspectFill"
									@click.stop="lookimg(item.Images,1)" />
								<image class="simg" :src="JSON.parse(item.Images)[2]+'?x-oss-process=image/resize,m_fill,w_1500'" mode="aspectFill"
									@click.stop="lookimg(item.Images,2)" />
							</view>
						</view>
						<view class="four" @click.stop="lookimg(item.Images)" v-else-if="JSON.parse(item.Images).length == 4">
							<view class="four-one">
								<view class="four-one-one" @click.stop="lookimg(item.Images,0)">
									<image class="simg" :src="JSON.parse(item.Images)[0]+'?x-oss-process=image/resize,m_fill,w_1500'" mode="aspectFill" />
								</view>
								<view class="four-one-two" @click.stop="lookimg(item.Images,1)">
									<image class="simg" :src="JSON.parse(item.Images)[1]+'?x-oss-process=image/resize,m_fill,w_1500'" mode="aspectFill" />
								</view>
							</view>
							<view class="four-two">
								<view class="four-two-one" @click.stop="lookimg(item.Images,2)">
									<image class="simg" :src="JSON.parse(item.Images)[2]+'?x-oss-process=image/resize,m_fill,w_1500'" mode="aspectFill" />
								</view>
								<view class="four-two-two" @click.stop="lookimg(item.Images,3)">
									<image class="simg" :src="JSON.parse(item.Images)[3]+'?x-oss-process=image/resize,m_fill,w_1500'" mode="aspectFill" />
								</view>
							</view>
						</view>
						<view class="five" v-else>
							<view class="five-one" v-for="(imgs,index) in JSON.parse(item.Images)" :key="index">
								<image @click.stop="lookimg(item.Images,index)" :src="imgs+'?x-oss-process=image/resize,m_fill,w_1500'" mode="aspectFill" />
							</view>
						</view>
						<!-- <u-album v-else-if="1<JSON.parse(item.Images).length<=4" :urls="JSON.parse(item.Images)" :style="{height:'750rpx',width: randomWidth()}"></u-album>
							<u-album v-else :urls="JSON.parse(item.Images)" singleSize="750rpx"
								multipleSize="221rpx"></u-album> -->
					</view>
					<view class="video_box" v-else @click.stop="">
						<video :src="JSON.parse(item.Images)[0]"
							:poster="JSON.parse(item.Images)[0]+'?x-oss-process=video/snapshot,t_1,m_fast,ar_auto'"></video>
					</view>
				</view>

				<view class="all-list">
					<view class="upvote">
						<view class="zan-time">
							{{item.City?item.City:''}}
						</view>
						<view class="zan-review">
							<view class="zan" @click.stop="zan(item.ID)">
								<uni-icons type="heart" size="24" color="#DCC188" v-if="item.IsMyZAN==0"></uni-icons>
								<uni-icons type="heart-filled" size="24" color="#DCC188" v-else></uni-icons>
								{{item.CommunityZAN.length}}
							</view>
							<view class="zan" @click="open_gift(item)">
								<uni-icons type="gift" size="24" color="#DCC188" v-if="item.IsSendGift==0"></uni-icons>
								<uni-icons type="gift-filled" size="24" color="#DCC188" v-else></uni-icons>
								{{item.Gifts.length}}
							</view>
							<view class="zan">
								<button hover-class="none" open-type="share">
									<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/img/share.png" mode="aspectFill">
									</image>
								</button>
							</view>
						</view>
						<!-- <view class="gift-review">
							<view class="zan" @click.stop="zan(item.ID)">
								<uni-icons type="heart" size="24" color="#DCC188"
									v-if="item.IsMyZAN==0"></uni-icons>
								<uni-icons type="heart-filled" size="24" color="#DCC188" v-else></uni-icons>
							</view>
						</view> -->
					</view>
					<block v-if="item.CommunityZAN.length>0">
						<view class="title">点赞</view>
						<view class="review-list">
							<view class="list" v-for="review in item.CommunityZAN" :key="review.ID">
								<image :src="review.HeadImgUrl" @click="nav_to(`/pages/user/user_visitor?id=${review.UserID}`)"></image>
								<view class="user_name">
									{{review.Name}}
								</view>

								<view class="time">
									{{getTime(review.CreateTime)}}
								</view>
								<view class="time">
									为你点赞
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
		</view>
		<block v-else>
			<u-empty mode="list" width="64" height="64"
				icon="https://golfdate.oss-cn-shenzhen.aliyuncs.com/community/20230510114106.png" :show="true" iconSize="32"
				text="啊哦,信息没找到,是不是搞错了"></u-empty>
		</block>

		<uni-popup ref="duihuan" type="center">
			<view class="pop_con">
				<view class="hd f1">账户充值</view>
				<view class="inp">
					<view class="lab">金额:</view>
					<input type="number" v-model="cz_price" placeholder="最小充值为10">
				</view>
				<view class="btns">
					<u-button text="取消" @click="closeDh"></u-button>
					<u-button type="success" text="确定" @click="recharge"></u-button>
				</view>
			</view>
		</uni-popup>
		<inputBox :commit="commit" @submit="submit"></inputBox>

		<uni-popup ref="gift" type="center">
			<view class="x-popup">
				<view class="popup-title">赠送对方礼物
					<view class="xiaoju-popup-close" @click="$refs['gift'].close()">关闭</view>
				</view>
				<scroll-view class="popup-wrap" scroll-y="true" :show-crollbar="true" scroll-with-animation="true">
					<view class="x-list">
						<view v-for="(l,i) in gift" :key="i" @click="gift_active=i" class="list-cell"
							:class="{'list-active':i==gift_active}">
							<image class="list-icon" :src="l.Icon?l.Icon:'/static/img/icon_bbt.png'" mode=""></image>
							<view v-if="i!=gift_active" class="list-name"> {{l.Name}} </view>
							<view class="list-price"> ￥{{l.Price}} </view>
							<!-- <view v-if="i==gift_active" @click="giftEvent" class="list-btn"> 赠送 </view> -->

							<view v-if="i==gift_active" class="list-btn">
								<view class="add" @click="gift_num_reduce(l)">-</view>
								<view class="count">
									<input type="text" v-model="l.Num" />
								</view>
								<view class="add" @click="gift_num_plus(l)">+</view>

							</view>
						</view>
					</view>
				</scroll-view>
				<view class="popup-btn" @click="giftEvent">赠送</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import inputBox from "./components/input-box.vue";
	export default {
		components: {
			inputBox,
		},
		data() {
			return {
				ID: 0,
				user: {},
				item: '',
				shareTitle: "挥友", //转发的标题
				sharePath: "", //转发的页面
				shareImg: "",

				CompanyID: 6002,
				isMore: true,
				zan_id: 0,
				review_id: 0,

				gift: [], //礼物数组
				gift_active: -1, //当前选中礼物
			};
		},
		methods: {
			// 获取礼物列表
			async GetGift() {
				let res = await this.$api.post('Friend/GetGift');
				this.gift = res.data || [];
			},
			open_gift() {
				this.$refs['gift'].open()
			},
			async giftEvent(item) {

				// 当前选中礼物
				const l = this.gift[this.gift_active]

				let res_gift = await this.$api.post('Friend/SendGift', {
					Price: l.Price,
					GiftID: l.ID,
					GiftName: l.Name,
					ToUserID: this.item.UserID,
					EventID: this.item.ID,
					SendType: '球友圈赠送'
				});


				// id=123129&type=0&name=abc
				// 支付请求
				let pres = await this.$api.post('Payment/PayV2', {
					total_fee: l.Price,
					EventType: '赠送礼物',
					EventID: JSON.stringify(res_gift.data),
					body: l.Name,
					SourcePage:'dynamic/detail',
					// #ifdef MP-WEIXIN
					PayChannel: "weixin",
					// #endif
					// #ifdef APP
					PayChannel: "app"
					// #endif
				});
				// 已余额支付成功
				if (pres.data == 0) {
					// 提示赠送成功
					this.$pv.msg('礼物赠送成功');
					// 关闭礼物弹出层
					this.$refs['gift'].close()

					this.item.IsSendGift = 1;
					this.item.Gifts.push({
						UserID: uni.getStorageSync('user').UserID
					})

					return;
				}

				// 支付成功返回的内容
				let payObj = JSON.parse(pres.data);
				let _this = this;
				// 调用uni支付API
				uni.requestPayment({
					// 服务提供商
					provider: 'wxpay',
					// #ifdef APP
					orderInfo: payObj,
					// #endif
					// #ifdef MP-WEIXIN
					timeStamp: payObj.timeStamp,
					nonceStr: payObj.nonceStr,
					package: payObj.package,
					signType: payObj.signType,
					paySign: payObj.paySign,
					// #endif
					success(res) {

						// 关闭礼物弹出层
						_this.$refs['gift'].close();

						_this.$pv.msg('礼物赠送成功');

						_this.item.IsSendGift = 1;
						_this.item.Gifts.push({
							UserID: _this.user.UserID
						})

					},
					fail(err) {
						_this.$pv.msg('支付失败');
					}
				});
			},

			async init() {

				this.user = uni.getStorageSync('user');

				await this.$api.post('/Common/Add_ViewPath', {
					Path: 'dynamic/detail',
					Platform:uni.getStorageSync('platform')
				});

				await this.getDetail();



				await this.GetGift();

			},
			async getDetail() {
				let res = await this.$api.post('Community/Detail', {
					ID: this.ID
				});

				this.item = res.data;

			},
			// 赞
			async zan(zid) {

				this.zan_id = zid;

				let res = await this.$api.post('Community/ZAN', {
					ID: zid
				});

				if (JSON.stringify(res.data) == 'true') {
					this.$pv.msg('点赞成功');

					this.item.IsMyZAN = 1;
					this.item.CommunityZAN.push({
						HeadImgUrl: uni.getStorageSync('user').HeadImgUrl,
						Name: uni.getStorageSync('user').Name
					})
				} else {
					this.$pv.msg(res.message);
				}
			},


			lookimg(url, index) {
				let arr = JSON.parse(url);
				uni.previewImage({
					urls: arr,
					current: index,
				})
			},

			async onLoad(e) {

				this.ID = e.id;


				if (await this.$store.getters.getLoginState) {

					this.init();

				}
			},
			onShow() {},
			onShareAppMessage(e) { //发送给朋友
				let o = this.item;
				console.log(o);
				let pid = uni.getStorageSync('user').UserID;

				this.shareTitle = 'Golf精彩瞬间，您不容错过';
				this.sharePath = 'pages/dynamic/detail?pid=' + pid + '&id=' + this.ID;
				this.shareImg = o.IsVideo == 1 ? JSON.parse(o.Images)[0] + '?x-oss-process=video/snapshot,t_1,m_fast,ar_auto' :
					JSON.parse(o.Images)[0]
				return {
					title: this.shareTitle,
					path: this.sharePath,
					imageUrl: this.shareImg
				}
			}
		}
	}
</script>

<style lang="scss">
	.trends {
		.item {
			margin-bottom: 20rpx;

			.item_hd {
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 20rpx;

				.left {
					height: 100rpx;
					display: flex;
					align-items: center;
				}

				.cover {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50rpx;
					border: 1px solid #7b7b7b;
					overflow: hidden;
					margin-right: 16rpx;

					image {
						height: 100%;
						width: 100%;
					}
				}

				.item_name {
					font-size: 32rpx !important;
					font-weight: 600;
				}
			}

			.item_ft {
				display: flex;
				justify-content: space-between;
				height: 60rpx;
				align-items: right;

				.ft_btn {
					display: flex;
					align-items: center;
				}

				.icon_box {
					height: 48rpx;
					width: 48rpx;
					border-radius: 48rpx;
					background: rgba(255, 255, 255, 0.9);
					margin-right: 16rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						height: 32rpx;
						width: 32rpx;
					}
				}
			}

			.item_bd {
				.simg {
					// width: 750rpx;
					display: block;
					max-height: 750rpx;
				}
			}
		}
	}

	.add_btn {
		position: fixed;
		right: 32rpx;
		bottom: 70rpx;
		width: 96rpx;
		height: 96rpx;
		z-index: 999;
		text-align: center;
		align-items: center;
		background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
		box-shadow: 0px 4rpx 6rpx 0px rgba(106, 84, 53, 0.4);
		color: #4C310C;
		line-height: 96rpx;
		border-radius: 100rpx;
	}

	.mt40 {
		margin-top: 40rpx;
	}

	.mt20 {
		margin-top: 20rpx;
		.one {
			display: flex;
			width: 100%;
			//height: 480rpx;
		
			image {
				width: 70%;
			}
		}

		.two {
			display: flex;
			justify-content: space-between;

			.two-one {
				width: 40%;
				height: 480rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.two-two {
				width: 59.5%;
				height: 480rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.three {
			display: flex;
			justify-content: space-between;

			.three-one {
				width: 49.5%;
				height: 480rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.three-two {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: 49.5%;
				height: 480rpx;

				image {
					width: 100%;
					height: 49.5%;
				}
			}
		}

		.four {
			display: flex;
			flex-direction: column;

			.four-one {
				display: flex;
				justify-content: space-between;

				.four-one-one {
					width: 40%;
					height: 300rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.four-one-two {
					width: 59.5%;
					height: 300rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.four-two {
				display: flex;
				justify-content: space-between;

				.four-two-one {
					width: 59.5%;
					height: 300rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.four-two-two {
					width: 40%;
					height: 300rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.five {
			display: flex;
			flex-wrap: wrap;
			width: 100%;

			.five-one {
				width: 221rpx;
				height: 250rpx;
				margin-bottom: 8rpx;
				margin-right: 4rpx;
				margin-left: 4rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.video_box {
		height: 500rpx;
		position: relative;
		z-index: 2;

		video {
			width: 100%;
			height: 100%;
		}
	}

	.all-list {
		box-sizing: border-box;
		padding: 0 32rpx;

		.location {
			font-size: 30rpx;
			color: #DCC188;
		}

		.title {
			font-size: 30rpx;
			color: #DCC188;
			line-height: 55rpx;
			font-weight: bold;
		}

		.upvote {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10rpx 0;

			.zan-time {
				font-size: 26rpx;
				color: #999999;
			}

			.zan-review {
				display: flex;
				align-items: right;

				.zan {
					margin-right: 40rpx;

					button {
						height: 48rpx;
						width: 48rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							height: 48rpx;
							width: 48rpx;
						}
					}
				}
			}

			.gift-review {
				display: flex;
				align-items: right;

				.zan {
					margin-right: 40rpx;
				}
			}
		}

		.tishi {
			box-sizing: border-box;
			position: relative;
			height: 60rpx;
			border-radius: 6rpx;
			background-color: #ffffff;
			display: flex;
			margin-top: 30rpx;
			padding-left: 6rpx;

			text {
				line-height: 60rpx;
				font-size: 28rpx;
				color: #DCC188;
				margin-left: 12rpx;
				letter-spacing: 2px;
			}

			.sanjiao {
				position: absolute;
				top: -15rpx;
				left: 30rpx;
				width: 0;
				height: 0;
				border-left: 15rpx solid transparent;
				border-right: 15rpx solid transparent;
				border-bottom: 20rpx solid #fff;
			}
		}

		.review-list {
			display: flex;
			flex-direction: column;
			margin-top: 20rpx;
			margin-bottom: 10rpx;

			.list {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: wrap;
				line-height: 80rpx;
				height: 80rpx;

				image {
					border: 1rpx solid #D6C6AB;
					width: 48rpx;
					height: 48rpx;
					border-radius: 100rpx;
				}

				.user_name {
					margin-left: 10rpx;
					width: 200rpx;
					font-size: 30rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.time {
					font-size: 24rpx;
					color: #576b95;
					padding-left: 20rpx;
				}
			}
		}
	}

	.cover_list {
		margin-left: 30rpx;
		flex: 1;
		display: flex;

		.cover {
			margin-left: -8rpx;
			height: 30rpx;
			width: 30rpx;
			border: 1px solid #fff;
			border-radius: 50%;
			overflow: hidden;

			image {
				height: 100%;
				width: 100%;

			}
		}
	}


	.pop_con {
		height: 400rpx;
		background: #fff;
		width: 650rpx;
		border-radius: 16rpx;
		border: 1px solid #FEF0BC;

		.hd {
			height: 90rpx;
			line-height: 90rpx;
			border-bottom: 1px solid #eee;
			text-align: center;
			line-height: 90rpx;
			color: #333;
			font-weight: bolder;
		}

		.inp {
			margin-top: 30rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;

			.lab {
				font-size: 32rpx;
				color: #666;
			}

			input {
				margin-top: 10rpx;
				height: 80rpx;
				line-height: 80rpx;
				width: 100%;
				padding-left: 10rpx;
				box-sizing: border-box;
				border: 1px solid #eee;
				border-radius: 10rpx;
				color: #000;
			}
		}

		.btns {
			margin-top: 40rpx;
			display: flex;
			padding-left: 30rpx;
			padding-right: 30rpx;
			justify-content: space-between;

			/deep/ .u-button__text {
				color: #333;
			}

			/deep/ .u-button--success {
				text {
					color: #fff !important;
				}

				background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
			}

			/deep/ .u-button {
				width: 290rpx;
			}
		}
	}


	.x-popup {
		background-color: #ffffff;
		width: 650rpx;
		border-radius: 20rpx;
		padding-bottom: 20rpx;

		.popup-title {
			padding: 20rpx 0 10rpx;
			text-align: center;
			font-size: 32rpx;
			position: relative;
			color: #333;

			.xiaoju-popup-close {
				font-size: 24rpx;
				position: absolute;
				right: 50rpx;
				top: 10rpx;
				color: #333;
			}
		}

		.popup-wrap {
			max-height: 800rpx;
			min-height: 300rpx;
			padding-top: 10rpx;
			padding-bottom: 30rpx;

			.popup-cell {
				padding: 8rpx 40rpx;
				font-size: 30rpx;
				line-height: 44rpx;
			}
		}

		.popup-btn {
			margin: 0 auto;
			width: 200rpx;
			height: 60rpx;
			border-radius: 10rpx;
			color: #fff;
			font-size: 28rpx;
			letter-spacing: 2px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #FD4C61;
		}
	}

	.x-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		padding: 0 60rpx;

		.list-cell {
			width: 27%;
			height: 170rpx;
			border: 2rpx solid #fff;
			display: flex;
			align-items: center;
			flex-direction: column;
			padding: 5rpx 0rpx 10rpx;
			border-radius: 16rpx;
			position: relative;

			&.list-active {
				border-radius: 16rpx;
				border: 2rpx solid #70737C;
			}

			.list-btn {
				width: calc(100% + 4rpx);
				height: 52rpx;
				color: #fff;
				background: #FD4C61;
				border-radius: 0rpx 0rpx 16rpx 16rpx;
				position: absolute;
				bottom: -2rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;


				.count {
					color: #fff;
					line-height: 60rpx !important;
					// margin-right: 5rpx;

					input {
						width: 40rpx;
						//border: #fff solid 1rpx;
					}
				}

				.add {

					display: flex;
					justify-content: center;
					align-items: center;
					/* border: 2rpx solid #ccc; */
					box-sizing: border-box;
					font-size: 52rpx;
					width: 75rpx;
					color: #fff;
				}
			}

			.list-icon {
				width: 80rpx;
				height: 80rpx;
			}

			.list-name {
				color: #333;
				font-size: 26rpx;
				margin-top: 8rpx;
			}

			.list-price {
				color: #333;
				font-size: 22rpx;
				margin-top: 5rpx;
			}
		}
	}
</style>